<template>
  <el-card class="box-card">
    <el-tooltip class="item" effect="dark" content="如果您有申请加学分的需求，可点击此处进入申请学分步骤" placement="right">
      <el-button type="text" @click="applyFormVisible = true">申请<i class="header-icon el-icon-info"></i></el-button>
    </el-tooltip>

    <el-divider></el-divider>
    <el-tooltip class="item" effect="dark" content="如果您有申请反馈的需求，可点击此处进入反馈步骤" placement="right">
    <el-button type="text" @click="FeedbackFormVisible = true">反馈<i class="header-icon el-icon-info"></i></el-button>
    </el-tooltip>
  </el-card>


  <!-- Form -->

  <el-dialog title="申请学分" v-model="applyFormVisible">
    <el-form :model="applyForm">
      <el-form-item label="学分" :label-width="formLabelWidth">
        <el-input v-model="applyForm.creditNumber" autocomplete="off" type="number"></el-input>
      </el-form-item>
      <el-form-item label="原因" :label-width="formLabelWidth">
        <el-input v-model="applyForm.reason" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学分凭证" :label-width="formLabelWidth">
        <el-upload
            class="upload-demo"
            action=""
            drag
            :auto-upload="false"
            :http-request="upLoadPicture"
            :on-change="changeFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将学分凭证拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
          </template>
        </el-upload>
      </el-form-item>

    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="applyFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="applySubmit">确 定</el-button>
    </span>
    </template>
  </el-dialog>

  <el-dialog title="反馈" v-model="FeedbackFormVisible">
    <el-form :model="FeedbackForm">
      <el-form-item label="原因" :label-width="formLabelWidth">
        <el-input v-model="FeedbackForm.reason" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="申诉凭证" :label-width="formLabelWidth">
        <el-upload
            class="upload-demo"
            action=""
            drag
            :auto-upload="false"
            :http-request="upLoadPicture"
            :on-change="changeFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将反馈凭证拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="FeedbackFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="FeedbackSubmit">确 定</el-button>
    </span>
    </template>
  </el-dialog>

</template>

<script>
import {applyCredit} from '../../../network/student/applyCredit'
import {applyStudentFeedback} from "../../../network/student/applyStudentFeedback";
import {getCurrentInstance, reactive, ref} from 'vue';

export default {
  name: 'Action',
  data() {
    return {
      applyFormVisible: false,
      FeedbackFormVisible: false,
      formLabelWidth: '120px',
      fileList: [],
    }
  },
  setup(props) {
    //const ruleFormsss = ref(null);
    const {proxy} = getCurrentInstance();
    // const router=useRouter();
    // 定义变量
    const applyForm = reactive({
      creditNumber: '',
      reason: ''
    })
    const FeedbackForm = reactive({
      reason: ''
    })

    function handleRemove(file, fileList) {
      console.log(file, fileList);
    }

    function handlePreview(file) {
      console.log(file);
    }

    function changeFile(file, fileList) {
      let fileName = file.name;
      let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
      if (regex.test(fileName.toLowerCase())) {
        proxy.fileList = fileList;
      } else {
        proxy.$message.error("请选择图片文件");
      }
      console.log(`fileList:${proxy.fileList}`);
    }

    function upLoadPicture(choose) {
      let form;
      if(choose===1){
         form = applyForm
      }else{
         form = FeedbackForm
      }
      console.log(choose)
      console.log(form)
      const formData = new FormData();
      let obj = {...form};
      // console.log(obj)
      Object.keys(obj).forEach(key => {
        console.log(key, obj[key]);
        formData.append(key, obj[key]);
      });
      //console.log(proxy.fileList.length)
      //循环已选择文件列表 fileList，将文件取出放入 formData 的file数组中
      for (let i = 0; i < proxy.fileList.length; i++) {
        formData.append("file", proxy.fileList[i].raw);
        console.log(proxy.fileList[i].raw)
      }
      const id = localStorage.getItem('StudentId')
      console.log("ad"+id)
      if(choose===1){
        //申请学分
        applyCredit(id,formData).then(() => {
          proxy.form = {};
          proxy.fileList = [];
          proxy.kind = null;
          proxy.users = null;
          proxy.$message.success("添加成功");
          proxy.query();
        })
      }else{
        //反馈
        applyStudentFeedback(id,formData).then(() => {
          proxy.form = {};
          proxy.fileList = [];
          proxy.kind = null;
          proxy.users = null;
          proxy.$message.success("添加成功");
          proxy.query();
        })
      }

      console.log(`数据：${formData.get("file")}`);

    }

    function applySubmit() {
      let choose=1;
      upLoadPicture(choose)
      proxy.applyFormVisible = false
    }
    function FeedbackSubmit(){
      let choose=2;
      upLoadPicture(choose)
      proxy.FeedbackFormVisible = false
    }


    return {
      applyForm, FeedbackForm, handleRemove, handlePreview, upLoadPicture, changeFile, applySubmit,FeedbackSubmit
    }

  }

}

</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
